<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>雄蜂直播间</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="{{ url_for('static', filename='js/jquery-2.1.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
</head>
<body>
    <div id="head">
        <button type="button" name="leavebutton" id="leavebutton">退出</button>
        <label id="username">{{ username }}</label>


    </div>

    <div id="body">
        <div class="left">
            <div class="box">
                <div class="wifi-symbol">
                  <div class="wifi-circle first"></div>
                  <div class="wifi-circle second"></div>
                  <div class="wifi-circle third"></div>
                  <div class="wifi-circle fourth"></div>
                </div>
            </div>
            <div class="battery">
                <div id="battery-top"></div>
                <div id="battery-body">
                    <label id="battery"></label>
                </div>

            </div>
            <div class="temp">
                <label id="temp">温度</label>
            </div>
			<div class="log"></div>
            <div class="logo">
                <img  src="{{ url_for('static', filename='img/timo.jpg') }}" width="260px" height="80px">
            </div>
        </div>

        <div class="mid">
            <div id="video-title">
                <div id="video-title-left">
                    <img src="{{ url_for('static', filename='img/drone.jpg') }}" width="80" height="80">
                </div>
                <div id="video-title-right">
                    <label id="label-title">勇往直前，蜂力无限！</label>
                    <br>
                    <label id="user-count">在线人数：</label><label id="online-users">在线人数</label>
                </div>

            </div>
<!--            <canvas id="video-canvas" width="0" height="0"  ></canvas>-->
<!--            <video id="video" ></video>-->
<!--            <img id="videoPlayer"  width="960" height="720" alt="Please wait later">-->
            <div id="videoPlayer">
                <canvas id="video-feed" width="960" height="640"></canvas>
                <button type="button" name="changebutton" id="changebutton">切换</button>
                <button id="fullscreen-button">全屏</button>
            </div>

            <div id="video-foot">
                <div id="gift-Box">
                    <div id="gift1">
                        <img class="Gift-img" src="{{ url_for('static', filename='img/1.jpg') }}">
                    </div>
                    <div id="gift2">
                        <img class="Gift-img" src="{{ url_for('static', filename='img/2.jpg') }}">
                    </div>
                    <div id="gift3">
                        <img class="Gift-img" src="{{ url_for('static', filename='img/3.jpg') }}">
                    </div>
                    <div id="gift4">
                        <img class="Gift-img" src="{{ url_for('static', filename='img/4.jpg') }}">
                    </div>
                </div>

            </div>
        </div>

        <div class="right">
            <div id="message-box" ></div>
            <div id="send">
                <input id="send-msg-inp" type="text" >
                <button id="send-msg-btn"  type="button" name="action">发送</button>
            </div>
        </div>
    </div>

    <script>
        var gift1=document.getElementById('gift1');
        let room = '{{ room }}'
        let username = '{{ username }}'
        let inp = document.querySelector('#send-msg-inp')
        let sendMsgBtn = document.querySelector('#send-msg-btn')
        let messageBox = document.querySelector('#message-box')
        let logBox = document.querySelector('.log')
        let leaveroom = document.querySelector('#leavebutton')
        let changebutton = document.querySelector('#changebutton')
        let fullscreenButton = document.querySelector('#fullscreen-button');
        let user = document.querySelector('#username').innerHTML
        let battery = document.querySelector('#battery')
        let batteryBody = document.getElementById("battery-body");
        let batteryAfter = window.getComputedStyle(batteryBody, "::after");
        let temp = document.querySelector('#temp')
        let height = document.querySelector('#height')
        let wifi1 = document.querySelector('.first')
        let wifi2 = document.querySelector('.second')
        let wifi3 = document.querySelector('.third')
        let wifi4 = document.querySelector('.fourth')

        // 建立 Socket.IO 连接
        socket=io();
        console.log(socket)
        // 接收无人机自身数据
        socket.on('get data',function(data){
            battery.textContent = data.battery+"%"
            let a = parseInt(data.battery);
            batteryBody.style.setProperty("--battery-height", a + "%");
            batteryBody.style.setProperty("--battery-top", 100-a + "%");
            temp.textContent=data.templ+"~"+data.temph+"°C"
            let msg = null
            let msgbox = document.createElement('div')
            msgbox.className = 'row'
                msg =
               `
              <div>
                  <span >
                  <b>${"tof高度"}</b>:  ${data.tof}
                  </span>
              </div>
              <div>
                  <span >
                  <b>${"翻转角"}</b>:  ${data.pitch}
                  <b>${"横滚角"}</b>:  ${data.roll}
                  <b>${"偏航角"}</b>:  ${data.yaw}
                  </span>
              </div>
              <div>
                  <span >
                  <b>${"x轴加速度"}</b>:  ${data.agx}
                  <b>${"y轴加速度"}</b>:  ${data.agy}
                  <b>${"z轴加速度"}</b>:  ${data.agz}
                  </span>
              </div>
              <div>
                  <span >
                  <b>${"主板温度"}</b>:  ${data.templ+"~"+data.temph+"°C"}
                  <b>${"电池电量"}</b>:  ${data.battery}
                  </span>
              </div>
              <div>
                  <span >
                  <b>${"------------------------------------"}</b>
                  </span>
              </div>
              `
            msgbox.innerHTML = msg
            logBox.appendChild(msgbox)
            logBox.scrollTop = logBox.scrollHeight

            if(data.wifi>=90){
                wifi1.style.borderColor='#3844e7'
                wifi2.style.borderColor='#3844e7'
                wifi3.style.borderColor='#3844e7'
                wifi4.style.borderColor='#3844e7'
            }
            if(data.wifi>=70&&data.wifi<90){
                wifi1.style.borderColor='#ccc'
                wifi2.style.borderColor='#3844e7'
                wifi3.style.borderColor='#3844e7'
                wifi4.style.borderColor='#3844e7'
            }
            if(data.wifi>=40&&data.wifi<70){
                wifi1.style.borderColor='#ccc'
                wifi2.style.borderColor='#ccc'
                wifi3.style.borderColor='#3844e7'
                wifi4.style.borderColor='#3844e7'
            }
            if(data.wifi>=0&&data.wifi<40){
                wifi1.style.borderColor='#ccc'
                wifi2.style.borderColor='#ccc'
                wifi3.style.borderColor='#ccc'
                wifi4.style.borderColor='#3844e7'
            }
        })
        //接收图像数据和飞行数据进行组装
        let mode = 1;
        let speed;
        let tof;
        let pitch;
        let roll;
        let yaw;
        let agx;
        let agy;
        let agz;
        let img = new Image();
        socket.on('video_feed', function(data){
            img.src = URL.createObjectURL(new Blob([data.data], {type: 'image/jpeg'}));
        });
        socket.on('fly_data', function(data){
            speed = data.speed;
            tof = data.tof;
            pitch = data.pitch;
            roll = data.roll;
            yaw = data.yaw;
            agx = data.agx;
            agy = data.agy;
            agz = data.agz;
            ag = Math.sqrt(agx*agx+agy*agy+agz*agz);
            vgx = data.vgx;
            vgy = data.vgy;
            vgz = data.vgz;
            vg = Math.sqrt(vgx*vgx+vgy*vgy+vgz*vgz);
            console.log(data);
        });
        var canvas = document.getElementById('video-feed');


        fullscreenButton.addEventListener('click', () => {
            if (document.fullscreenElement) {
                document.exitFullscreen();
            }
            else {
                canvas.requestFullscreen();
            }
        });

        canvas.addEventListener('mouseenter', () => {
            fullscreenButton.classList.add('show');
            changebutton.classList.add('show');
        });
        fullscreenButton.addEventListener('mouseenter', () => {
            fullscreenButton.classList.add('show');
            changebutton.classList.add('show');
        });
        changebutton.addEventListener('mouseenter', () => {
            fullscreenButton.classList.add('show');
            changebutton.classList.add('show');
        });
        canvas.addEventListener('mouseleave', () => {
            fullscreenButton.classList.remove('show');
            changebutton.classList.remove('show');
        });

        changebutton.onclick = function () {
            if(mode==0){
                mode=1;
            }
            else{
                mode=0;
            }
        }

        var ctx = canvas.getContext('2d');
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            if(mode == 0){
                ctx.fillStyle = 'white';
                ctx.textAlign = 'start';
                ctx.textBaseline = 'alphabetic';
                ctx.font = 'bold 16px Arial';
                ctx.fillText('TOF: ' + tof, 10, 40);
                ctx.fillText('Pitch: ' + pitch, 10, 60);
                ctx.fillText('Roll: ' + roll, 10, 80);
                ctx.fillText('Yaw: ' + yaw, 10, 100);
                ctx.fillText('AGX: ' + agx, 10, 120);
                ctx.fillText('AGY: ' + agy, 10, 140);
                ctx.fillText('AGZ: ' + agz, 10, 160);
                ctx.fillText('AG: ' + ag, 10, 180);
                ctx.fillText('VGX: ' + vgx, 10, 200);
                ctx.fillText('VGY: ' + vgy, 10, 220);
                ctx.fillText('VGZ: ' + vgz, 10, 240);
                ctx.fillText('VG: ' + vg, 10, 260);
            }
            if(mode == 1){
                ctx.fillStyle = 'white';
                ctx.textAlign = 'start';
                ctx.textBaseline = 'alphabetic';
                ctx.font = 'bold 16px Arial';
                // 加速度表
                const originX = 150;
                const originY = 450;
                ctx.strokeStyle = 'white';  // 红色
                ctx.lineWidth = 2; // 设置线宽

                ctx.beginPath();
                ctx.moveTo(originX, originY);
                ctx.lineTo(originX-20,originY);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX, originY-25);
                ctx.lineTo(originX-20,originY-25);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX, originY-50);
                ctx.lineTo(originX-20,originY-50);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX+40, originY-75);
                ctx.lineTo(originX-20,originY-75);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX, originY-100);
                ctx.lineTo(originX-20,originY-100);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX, originY-125);
                ctx.lineTo(originX-20,originY-125);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX, originY-150);
                ctx.lineTo(originX-20,originY-150);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(originX, originY);
                ctx.lineTo(originX,originY-150);
                ctx.stroke();

                a=(agz/1000).toFixed(2);

                ctx.beginPath();
                ctx.moveTo(originX+5, originY-75-a*50);
                ctx.lineTo(originX+35,originY-75-a*50);
                ctx.lineTo(originX+35, originY-75);
                ctx.lineTo(originX+5, originY-75);
                ctx.closePath(); // 将路径闭合，即连接第三个顶点和起点
                ctx.fillStyle = 'white'; // 设置填充颜色为蓝色
                ctx.fill(); // 填充多边形



                ctx.fillText(a,originX+40+5, originY-75+5);
                ctx.fillText('g',originX+40+5+15, originY-75+5+15);

                ctx.fillText('1.5',originX-20-25, originY+5);
                ctx.fillText('1.0',originX-20-25, originY-25+5);
                ctx.fillText('0.5',originX-20-25, originY-50+5);
                ctx.fillText('0.0',originX-20-25, originY-75+5);
                ctx.fillText('0.5',originX-20-25, originY-100+5);
                ctx.fillText('1.0',originX-20-25, originY-125+5);
                ctx.fillText('1.5',originX-20-25, originY-150+5);



                // 垂直速度表

                const HeightX = 800;
                const HeightY = 450;        //最底的那个点
                ctx.strokeStyle = 'white';  // 红色
                ctx.lineWidth = 2; // 设置线宽

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY);
                ctx.lineTo(HeightX, HeightY-150);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY);
                ctx.lineTo(HeightX +20, HeightY);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY -25);
                ctx.lineTo(HeightX +20, HeightY-25);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY -50);
                ctx.lineTo(HeightX +20, HeightY-50);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX+20, HeightY-75);
                ctx.lineTo(HeightX -40, HeightY-75);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY-100);
                ctx.lineTo(HeightX +20, HeightY-100);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY-125);
                ctx.lineTo(HeightX +20, HeightY-125);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX, HeightY-150);
                ctx.lineTo(HeightX +20, HeightY-150);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(HeightX -5, HeightY-75-vgz*5);
                ctx.lineTo(HeightX -35, HeightY-75-vgz*5);
                ctx.lineTo(HeightX -35, HeightY-75);
                ctx.lineTo(HeightX -5, HeightY-75);
                ctx.closePath(); // 将路径闭合，即连接第三个顶点和起点
                ctx.fillStyle = 'white'; // 设置填充颜色为蓝色
                ctx.fill(); // 填充多边形

                ctx.fillText(vgz,HeightX-40-15-5, HeightY-75+5);
                ctx.fillText('dm/s',HeightX-40-15-15, HeightY-75+5+15);

                ctx.fillText(15,HeightX +20, HeightY+5);
                ctx.fillText(10,HeightX +20, HeightY-25+5);
                ctx.fillText(5,HeightX +20, HeightY-50+5);
                ctx.fillText(0,HeightX +20, HeightY-75+5);
                ctx.fillText(5,HeightX +20, HeightY-100+5);
                ctx.fillText(10,HeightX +20, HeightY-125+5);
                ctx.fillText(15,HeightX +20, HeightY-150+5);


                // 高度表
                const width = canvas.width;
                const height = canvas.height;
                const tofX = width-40;
                const tofY = height/2;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";

                ctx.beginPath();
                ctx.moveTo(tofX, tofY);
                ctx.lineTo(tofX+40, tofY);
                ctx.fillText(Math.floor(tof/100)*100+700, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*7);
                ctx.fillText(Math.floor(tof/100)*100+600, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*6);
                ctx.fillText(Math.floor(tof/100)*100+500, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*5);
                ctx.fillText(Math.floor(tof/100)*100+400, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*4);
                ctx.fillText(Math.floor(tof/100)*100+300, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*3);
                ctx.fillText(Math.floor(tof/100)*100+200, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*2);
                ctx.fillText(Math.floor(tof/100)*100+100, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4-40*1);
                ctx.fillText(tof,tofX-20, tofY);
                ctx.fillText('mm',tofX-20, tofY+15);
                ctx.fillText(Math.floor(tof/100)*100, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.3);
                ctx.fillText(Math.floor(tof/100)*100-100, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*1);
                ctx.fillText(Math.floor(tof/100)*100-200, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*2);
                ctx.fillText(Math.floor(tof/100)*100-300, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*3);
                ctx.fillText(Math.floor(tof/100)*100-400, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*4);
                ctx.fillText(Math.floor(tof/100)*100-500, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*5);
                ctx.fillText(Math.floor(tof/100)*100-600, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*6);
                ctx.fillText(Math.floor(tof/100)*100-700, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*7);
                ctx.fillText(Math.floor(tof/100)*100-800, tofX+20, tofY+(tof-Math.floor(tof/100)*100)*0.4+40*8);
                ctx.stroke();

                // 俯仰角
                ctx.textAlign = 'start';
                ctx.textBaseline = 'alphabetic';
                const PitchX = width/2;
                const PitchY = height/2+75;

                ctx.beginPath();
                ctx.moveTo(PitchX+3, PitchY);
                ctx.lineTo(PitchX+100, PitchY);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(PitchX, PitchY, 6, 0, 2 * Math.PI);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-3, PitchY);
                ctx.lineTo(PitchX-100, PitchY);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(0, PitchY+pitch*10-4.8*roll);
                ctx.lineTo(width, PitchY+pitch*10+4.8*roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-50, PitchY-50+pitch*10);
                ctx.lineTo(PitchX+50, PitchY-50+pitch*10+roll);
                ctx.fillText(5,PitchX-50-10, PitchY-50+pitch*10);
                ctx.fillText(5,PitchX+50, PitchY-50+pitch*10+roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-100, PitchY-100+pitch*10);
                ctx.lineTo(PitchX+100, PitchY-100+pitch*10+2*roll);
                ctx.fillText(10,PitchX-100-20, PitchY-100+pitch*10);
                ctx.fillText(10,PitchX+100, PitchY-100+pitch*10+2*roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-50, PitchY-150+pitch*10);
                ctx.lineTo(PitchX+50, PitchY-150+pitch*10+roll);
                ctx.fillText(15,PitchX-50-20, PitchY-150+pitch*10);
                ctx.fillText(15,PitchX+50, PitchY-150+pitch*10+roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-100, PitchY-200+pitch*10);
                ctx.lineTo(PitchX+100, PitchY-200+pitch*10+2*roll);
                ctx.fillText(20,PitchX-100-20, PitchY-200+pitch*10);
                ctx.fillText(20,PitchX+100, PitchY-200+pitch*10+2*roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-50, PitchY+50+pitch*10);
                ctx.lineTo(PitchX+50, PitchY+50+pitch*10+roll);
                ctx.fillText(-5,PitchX-50-15, PitchY+50+pitch*10);
                ctx.fillText(-5,PitchX+50, PitchY+50+pitch*10+roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-100, PitchY+100+pitch*10);
                ctx.lineTo(PitchX+100, PitchY+100+pitch*10+2*roll);
                ctx.fillText(-10,PitchX-100-25, PitchY+100+pitch*10);
                ctx.fillText(-10,PitchX+100, PitchY+100+pitch*10+2*roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-50, PitchY+150+pitch*10);
                ctx.lineTo(PitchX+50, PitchY+150+pitch*10+roll);
                ctx.fillText(-15,PitchX-50-25, PitchY+150+pitch*10);
                ctx.fillText(-15,PitchX+50, PitchY+150+pitch*10+roll);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX-100, PitchY+200+pitch*10);
                ctx.lineTo(PitchX+100, PitchY+200+pitch*10+2*roll);
                ctx.fillText(-20,PitchX-100-25, PitchY+200+pitch*10);
                ctx.fillText(-20,PitchX+100, PitchY+200+pitch*10+2*roll);
                ctx.stroke();
                // 横滚角
                ctx.beginPath();
                ctx.arc(PitchX, PitchY-200, 100, 7/6 * Math.PI, 11/6 * Math.PI);
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(30*Math.PI/180), PitchY-200-100*Math.sin(30*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(30*Math.PI/180), PitchY-200-110*Math.sin(30*Math.PI/180));
                ctx.fillText(20,PitchX+110*Math.cos(30*Math.PI/180), PitchY-200-110*Math.sin(30*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(45*Math.PI/180), PitchY-200-100*Math.sin(45*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(45*Math.PI/180), PitchY-200-110*Math.sin(45*Math.PI/180));
                ctx.fillText(15,PitchX+110*Math.cos(45*Math.PI/180), PitchY-200-110*Math.sin(45*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(60*Math.PI/180), PitchY-200-100*Math.sin(60*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(60*Math.PI/180), PitchY-200-110*Math.sin(60*Math.PI/180));
                ctx.fillText(10,PitchX+110*Math.cos(60*Math.PI/180), PitchY-200-110*Math.sin(60*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(75*Math.PI/180), PitchY-200-100*Math.sin(75*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(75*Math.PI/180), PitchY-200-110*Math.sin(75*Math.PI/180));
                ctx.fillText(5,PitchX+110*Math.cos(75*Math.PI/180), PitchY-200-110*Math.sin(75*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(90*Math.PI/180), PitchY-200-100*Math.sin(90*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(90*Math.PI/180), PitchY-200-110*Math.sin(90*Math.PI/180));
                ctx.fillText(0,PitchX+110*Math.cos(90*Math.PI/180)-4, PitchY-200-110*Math.sin(90*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(105*Math.PI/180), PitchY-200-100*Math.sin(105*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(105*Math.PI/180), PitchY-200-110*Math.sin(105*Math.PI/180));
                ctx.fillText(-5,PitchX+110*Math.cos(105*Math.PI/180)-8, PitchY-200-110*Math.sin(105*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(120*Math.PI/180), PitchY-200-100*Math.sin(120*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(120*Math.PI/180), PitchY-200-110*Math.sin(120*Math.PI/180));
                ctx.fillText(-10,PitchX+110*Math.cos(120*Math.PI/180)-20, PitchY-200-110*Math.sin(120*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(135*Math.PI/180), PitchY-200-100*Math.sin(135*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(135*Math.PI/180), PitchY-200-110*Math.sin(135*Math.PI/180));
                ctx.fillText(-15,PitchX+110*Math.cos(135*Math.PI/180)-20, PitchY-200-110*Math.sin(135*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos(150*Math.PI/180), PitchY-200-100*Math.sin(150*Math.PI/180));
                ctx.lineTo(PitchX+110*Math.cos(150*Math.PI/180), PitchY-200-110*Math.sin(150*Math.PI/180));
                ctx.fillText(-20,PitchX+110*Math.cos(150*Math.PI/180)-20, PitchY-200-110*Math.sin(150*Math.PI/180));
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(PitchX+100*Math.cos((90-3*roll)*Math.PI/180), PitchY-200-100*Math.sin((90-3*roll)*Math.PI/180));
                ctx.lineTo(PitchX+80*Math.cos((90-3*roll)*Math.PI/180), PitchY-200-80*Math.sin((90-3*roll)*Math.PI/180));
                ctx.stroke();

                //偏航角
                ctx.beginPath();
                ctx.fillText(yaw,PitchX-15, PitchY-340);
                ctx.stroke();
                function Angle(angle) {
                    if (angle > 180) {
                        angle = -180 + (angle - 180) % 180;
                    }
                    else if (angle < -180) {
                        angle = 180 + (angle + 180) % 180;
                    }
                    return angle;
                }
                // 水平居中位置
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.beginPath();
                ctx.fillText(Angle(Math.floor(yaw/10)*10-120),PitchX+(Math.floor(yaw/10)*10-yaw)*5-120*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-110),PitchX+(Math.floor(yaw/10)*10-yaw)*5-110*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-100),PitchX+(Math.floor(yaw/10)*10-yaw)*5-100*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-90),PitchX+(Math.floor(yaw/10)*10-yaw)*5-90*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-80),PitchX+(Math.floor(yaw/10)*10-yaw)*5-80*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-70),PitchX+(Math.floor(yaw/10)*10-yaw)*5-70*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-60),PitchX+(Math.floor(yaw/10)*10-yaw)*5-60*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-50),PitchX+(Math.floor(yaw/10)*10-yaw)*5-50*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-40),PitchX+(Math.floor(yaw/10)*10-yaw)*5-40*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-30),PitchX+(Math.floor(yaw/10)*10-yaw)*5-30*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-20),PitchX+(Math.floor(yaw/10)*10-yaw)*5-20*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10-10),PitchX+(Math.floor(yaw/10)*10-yaw)*5-10*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10),PitchX+(Math.floor(yaw/10)*10-yaw)*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+10),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+20),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+10*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+30),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+20*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+40),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+30*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+50),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+40*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+60),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+50*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+70),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+60*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+80),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+70*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+90),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+80*5, PitchY-380);
                ctx.fillText(Angle(Math.floor(yaw/10)*10+100),PitchX+(Math.floor(yaw/10)*10+10-yaw)*5+90*5, PitchY-380);
                ctx.moveTo(PitchX, PitchY-350);
                ctx.lineTo(PitchX, PitchY-400);
                ctx.stroke();




            }
        };


        // 加入直播间
        socket.emit('join', {
            username: username,
        })
        // 加入或退出的信息
        socket.on('connect info', function (data) {
            console.log(data)
            let connectInfo = document.createElement('div')
            connectInfo.className = 'row'
            let msg = `
              <div class="joinAndleave">
                  <span>${data}
                  </span>
              </div>`
            connectInfo.innerHTML = msg
            messageBox.appendChild(connectInfo)
        })
        // 退出直播间
        leaveroom.onclick = function () {
            socket.emit('leave', {
                username: username,
            })
            socket.close();
            window.location.href = '{{ url_for('logout') }}';
        }
        // 关闭窗口退出直播间
        window.onbeforeunload = () => {
            socket.emit('leave', {
                username: username,
            });
            socket.close();
        };
        // 发送消息
        sendMsgBtn.onclick = function () {
            let inp = document.querySelector('#send-msg-inp')
            let msg = inp.value
            let user = document.querySelector('#username').innerHTML
            inp.value = ''

            console.log('1111');
            if(msg){
                socket.emit('send msg', {
                    user: user,
                    message: msg,
                })
                messageBox.scrollTop = messageBox.scrollHeight
            }
            else {
                alert('消息不能为空')
            }
        }
        // 接受消息
        socket.on('send msg', function (data) {
            console.log(data)
            console.log(socket.id)
            let msg = null
            let msgbox = document.createElement('div')
            msgbox.className = 'row'
                msg = `
              <div>
                  <span ><b>${data.user}</b>:  ${data.message}
                  </span>
              </div>`
            msgbox.innerHTML = msg
            messageBox.appendChild(msgbox)
            messageBox.scrollTop = messageBox.scrollHeight
        })

        //更新在线人数
        socket.on('online users', function(data) {
            $('#online-users').text(data.count);
        });
        //绑定送礼触发事件
        $(function(){
            $('#gift1').bind('click',function(){
                socket.emit('send gift', {
                    username: user,
                    giftname:'超级火箭',
                })
            });
        });
        $(function(){
            $('#gift2').bind('click',function(){
                socket.emit('send gift', {
                    username: user,
                    giftname:'火箭',
                })
            });
        });
        $(function(){
            $('#gift3').bind('click',function(){
                socket.emit('send gift', {
                    username: user,
                    giftname:'飞机',
                })
            });
        });
        $(function(){
            $('#gift4').bind('click',function(){
                socket.emit('send gift', {
                    username: user,
                    giftname:'办卡',
                })
            });
        });
        //接收有人送礼的消息
        socket.on('send gift', function(data) {
            let connectInfo = document.createElement('div')
            connectInfo.className = 'row'
            let msg = `
              <div class="joinAndleave">
                  <span class="sendgift">${data}
                  </span>
              </div>`
            connectInfo.innerHTML = msg
            messageBox.appendChild(connectInfo)
        });
    </script>
</body>
</html>